<template>
  <div class="logina">
    <!-- <img src="../../assets/img/beijin-new.jpg" id="bgc"> -->
    <img src="../../assets/img/login.png" id="bgc">
    <div id="particles-js">
      <div class="login">
        <div class="login-top">
          <div>安大后勤管理系统</div>
          <div id="login_container" v-show="showInput == false"></div>

          <!-- <img src="../../assets/img/AD-logo.png" class="login_logo"  alt="" srcset="" /> -->
        </div>
        <div class="login-center clearfix" v-show="showInput == true">
          <div class="login-center-img"><img src="../../assets/img/name.png" /></div>
          <div class="login-center-input">
            <input type="text" name="" v-model="account" placeholder="请输入工号" onfocus="this.account ==''"
              onblur="this.account='请输入工号'" />
            <div class="login-center-input-text">工号</div>
          </div>
        </div>
        <div class="login-center clearfix" v-show="showInput == true">
          <div class="login-center-img"><img src="../../assets/img/password.png" /></div>
          <div class="login-center-input">
            <input :type="password_text" name="" v-model="password" placeholder="请输入密码" onfocus="this.password=''"
              onblur="this.password='请输入您的密码' " />
            <i class="el-icon-view" @mousedown="showPassword" @mouseup="hidePassword" id="showPassword"></i>
            <div class="login-center-input-text">密码</div>
          </div>
        </div>
        <div class="login-center clearfix" v-show="showInput == true">
          <div class="login-center-img"><img src="../../assets/img/name.png" /></div>
          <div class="login-center-input">
            <input type="text" name="" v-model="idLast" placeholder="请输入身份证号后六位" />
            <div class="login-center-input-text">身份证号</div>
          </div>
        </div>
        <div class="login-center clearfix" v-show="showInput == true">
          <el-checkbox v-model="rememberChecked">记住账号和密码</el-checkbox>
        </div>
        <div class="WXLogin" @click="showQRcode" v-show="showInput == true">微信登录</div>
        <div class="WXLogin" @click="inputLogin" v-show="showInput == false">账号登录</div>
        <div class="login-button" @click="index()" v-show="showInput == true">账号登录</div>
      </div>
    </div>
    <!-- <div id="schoolLogoText">安徽大学</div> -->
    <!-- <img id="schoolLogo" src="../../assets/img/AD-logo-login.png" alt=""> -->
    <div id="infor">合肥启誉科技有限公司 备案号:皖ICP备18009826号-1</div>
  </div>
</template>
<script>
import { login, WXLogin, WXLoginBindUserNumber } from '_api/Login/index.js'
import { getSchoolWorker } from '_api/UserManage/SchoolWorker/index.js'
import { getMenuList } from '_api/MenuManage/index.js'
import { getForm } from '_api/MaintainView/MaintainForm/index.js'
import { getStudent } from '_api/UserManage/Student/index.js'
import { encode,decode } from '@utils/upload/base64.js'

export default {
  data() {
    return {
      account: '',
      password: '',
      idLast: '',
      code: "",
      password_text: "password",
      showInput: true,
      form: {
        campusId: "",
        collegeId: "",
        current: 0,
        deptId: "",
        field: "",
        name: "",
        order: "",
        pageSize: 500,
        sex: "",
        state: "",
        userName: "",
        tel: "",
        clientRole: ""
      },
      // 查询参数
      queryParams: {
        component: "",
        current: 0,
        field: "",
        hidden: "",
        icon: "",
        id: "",
        keepAlive: "",
        name: "",
        order: "",
        pageSize: 100,
        parentId: "",
        path: "",
        perms: "",
        redirect: "",
        sortIndex: "",
        title: "",
        type: "0",
      },
      rememberChecked:false,
    }
  },
  mounted() {
    // this.showQRcode()
  },
  created() {
    window.localStorage.removeItem('firstTime')
    window.localStorage.removeItem('clientRole')
    window.localStorage.removeItem('campusName')
    window.localStorage.removeItem('menus')
    window.localStorage.removeItem('token')
    window.localStorage.removeItem('name')
    if(window.localStorage.getItem('accountPassword')){
      this.rememberChecked = true
      console.log(decode(window.localStorage.getItem('accountPassword')));
      let accountPassword=decode(window.localStorage.getItem('accountPassword')).split(',')
      this.account= accountPassword[0]
      this.password= accountPassword[1]
    }
    this.keyDown()
    if (this.$route.query.code) {
      this.code = this.$route.query.code
      this.WXLogin()
    }

  },
  methods: {
    WXLogin() {
      WXLogin({ code: this.code }).then(res => {
        if (res.data.success == true) {
          if (res.data.data.isBind == true) {
            window.localStorage.setItem('token', res.data.data.authorization)
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            this.getMenuList()
            this.$router.push('/HomeView')

          } else {
            this.showInput = true
          }
        }
      })
    },
    inputLogin() {
      this.showInput = true

    },
    // 显示二维码
    showQRcode() {
      var obj = new WxLogin({
        self_redirect: false,    //默认为false(保留当前二维码)  true(当前二维码所在的地方通过iframe 内跳转到 redirect_uri)
        id: "login_container",  //容器的id
        appid: "wxb233b616e9e8bfa9",  //应用唯一标识，在微信开放平台提交应用审核通过后获得
        scope: "snsapi_login",   //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
        redirect_uri: 'https://hqxt.ahu.edu.cn',    //扫完码授权成功跳转到的路径
        state: "",    //用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止 csrf 攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加 session 进行校验
        style: "white",   //提供"black"、"white"可选，默认为黑色文字描述
        href: "data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMTc0cHg7DQogIGhlaWdodDogMTc0cHg7DQogIG1hcmdpbi10b3A6IDA7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQouaW1wb3dlckJveCAuaW5mbyB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoud2ViX3FyY29kZV90eXBlX2lmcmFtZSB7DQogIHdpZHRoOiAxNzRweDsNCn0NCg=="  //自定义样式链接，第三方可根据实际需求覆盖默认样式
      });
      this.showInput = false
    },
    keyDown() {
      var that = this
      //监听键盘按钮
      document.onkeydown = function (event) {
        var e = event || window.event;
        var keyCode = e.keyCode || e.which;
        switch (keyCode) {
          case 13://enter
            that.index()
            break;
          default:
            break;
        }
      }
    },
    //显示密码
    showPassword() {
      if (this.password_text == "password" && this.password != "") {
        this.password_text = "text"
      } else {
        this.password_text = "password"
      }
    },
    // 隐藏密码
    hidePassword() {
      if (this.password_text == "text" || this.password == "") {
        this.password_text = "password"
      } else {
        this.password_text = "text"
      }
    },
    //查询菜单列表
    getMenuList() {
      getMenuList(this.queryParams).then(res => {
        if (res.data.success == true) {
          this.$store.commit('SET_MENUS', res.data.data.list)
          // window.localStorage.setItem("menus", JSON.stringify(res.data.data.list))
        }
      })
    },
    //登录
    index() {
      if (this.account == '') {
        this.$message({
          message: '请输入账号',
          type: 'warning',
        })
        return false
      }
      if (this.password == '') {
        this.$message({
          message: '请输入密码',
          type: 'warning',
        })
        return false
      }
      if (this.idLast == '') {
        this.$message({
          message: '请输入身份证号',
          type: 'warning',
        })
        return false
      }
      if (this.code) {
        WXLoginBindUserNumber({
          username: this.account,
          password: encode(this.password, 'UTF-8'),
          idLast: encode(this.idLast, 'UTF-8'),
          code: this.code
        }).then(res => {
          // console.log(res)
          if (res.data.success == true) {
            window.sessionStorage.setItem('account', this.account)
            window.sessionStorage.setItem('passWord', this.password)
            window.localStorage.setItem('token', res.data.data.authorization)
            getSchoolWorker(this.form).then(res => {
              if (res.data.success == true) {
                res.data.data.list.forEach(item => {
                  if (item.userName == this.account) {
                    window.localStorage.setItem('name', item.name)
                    window.localStorage.setItem('clientRole', item.clientRole)
                    if (item.campusName) {
                      window.localStorage.setItem('campusName', item.campusName)
                    }
                    if (item.collegeName) {
                      window.localStorage.setItem('collegeName', item.collegeName)
                    }
                    this.$router.push('/HomeView')
                    this.$message({
                      message: '登录成功',
                      type: 'success'
                    });
                  }
                })
              }
            })
            window.localStorage.setItem('firstTime', true)
            // this.getMaintainForm()
            // this.getStudentNum()
            this.getMenuList()
            document.onkeydown = function (event) {
              var e = event || window.event;
              var keyCode = e.keyCode || e.which;
              switch (keyCode) {
                case 13://enter
                  break;
                default:
                  break;
              }
            }

          } else {
            this.$message({
              message: res.data.message,
            });
          }
        })
      } else {
        login({
          username: this.account,
          password: encode(this.password, 'UTF-8'),
          idLast: encode(this.idLast, 'UTF-8')
        }).then(res => {
          // console.log(res)
          if (res.data.success == true) {
            window.sessionStorage.setItem('account', this.account)
            window.sessionStorage.setItem('passWord', this.password)
            if(this.rememberChecked){
              window.localStorage.setItem('accountPassword', encode(this.account+','+this.password))
            }else{
              window.localStorage.removeItem('accountPassword')
            }
            window.localStorage.setItem('token', res.data.data.authorization)
            getSchoolWorker(this.form).then(res => {
              // console.log(res)
              if (res.data.success == true) {
                res.data.data.list.forEach(item => {
                  if (item.userName == this.account) {
                    window.localStorage.setItem('name', item.name)
                    window.localStorage.setItem('clientRole', item.clientRole)
                    if (item.campusName) {
                      window.localStorage.setItem('campusName', item.campusName)
                    }
                    if (item.collegeName) {
                      window.localStorage.setItem('collegeName', item.collegeName)
                    }
                    this.$router.push('/HomeView')
                    this.$message({
                      message: '登录成功',
                      type: 'success'
                    });
                  }
                })
              }
            })
            window.localStorage.setItem('firstTime', true)
            // this.getMaintainForm()
            // this.getStudentNum()
            this.getMenuList()
            document.onkeydown = function (event) {
              var e = event || window.event;
              var keyCode = e.keyCode || e.which;
              switch (keyCode) {
                case 13://enter
                  break;
                default:
                  break;
              }
            }

          } else {
            this.$message({
              message: res.data.message,
            });
          }
        })
      }
    },
    getMaintainForm() {
      var date = new Date();
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      var today = year + '-' + month + '-' + day
      getForm({
        createTime: today,
        finishedTime: today,
        status: "1",
        current: 0,
        pageSize: 10,
      }).then(res => {
        if (res.data.success == true) {
          this.$store.commit('SET_statusOne', res.data.data.total)
          getForm({
            createTime: today,
            finishedTime: today,
            status: "2",
            current: 0,
            pageSize: 10,
          }).then(res => {
            if (res.data.success == true) {
              this.$store.commit('SET_statusTwo', res.data.data.total)
              getForm({
                createTime: today,
                finishedTime: today,
                status: "3",
                current: 0,
                pageSize: 10,
              }).then(res => {
                if (res.data.success == true) {
                  this.$store.commit('SET_statusThree', res.data.data.total)
                  getForm({
                    createTime: today,
                    finishedTime: today,
                    status: "4",
                    current: 0,
                    pageSize: 10,
                  }).then(res => {
                    if (res.data.success == true) {
                      this.$store.commit('SET_statusFour', res.data.data.total)
                      getForm({
                        createTime: today,
                        finishedTime: today,
                        status: "",
                        current: 0,
                        pageSize: 10,
                      }).then(res => {
                        if (res.data.success == true) {
                          this.$store.commit('SET_statusTotal', res.data.data.total)

                        }
                      })
                    }
                  })
                }
              })
            }
          })
        }
      })
    },
    getStudentNum() {
      getStudent({
        current: 0,
        pageSize: 10,
        type: 0
      }).then(res => {
        if (res.data.success == true) {
          this.$store.commit('SET_typeZero', res.data.data.total)
          getStudent({
            current: 0,
            pageSize: 10,
            type: 1
          }).then(res => {
            if (res.data.success == true) {
              this.$store.commit('SET_typeOne', res.data.data.total)
              getStudent({
                current: 0,
                pageSize: 10,
                type: 2
              }).then(res => {
                if (res.data.success == true) {
                  this.$store.commit('SET_typeTwo', res.data.data.total)
                  getStudent({
                    current: 0,
                    pageSize: 10,
                    type: 3
                  }).then(res => {
                    if (res.data.success == true) {
                      this.$store.commit('SET_typeThree', res.data.data.total)
                      getStudent({
                        current: 0,
                        pageSize: 10,
                        type: 4
                      }).then(res => {
                        if (res.data.success == true) {
                          this.$store.commit('SET_typeFour', res.data.data.total)

                        }
                      })
                    }
                  })
                }
              })
            }
          })
        }
      })
    }


  },
}
</script>
<style scoped lang="scss">
.WXLogin {
  font-size: 16px;
  position: absolute;
  right: 30px;
  bottom: 10px;
  cursor: pointer;
  width: 180px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  background-color: rgb(23, 197, 72);
  // opacity: .7;
  border-radius: 5px;
  color: white;
  font-family: '楷体';
}

#login_container {
  height: 200px;
  width: 200px;
  position: absolute;
  left: calc(50% - 90px);
  margin-top: 20px;
}

#prompt {
  font-size: 10px;
  color: #878787;
  margin-left: 10px;
}

.logina {
  width: 100vw;
  height: 100vh;
  position: relative;
  // background-image: url(../../assets/img/bgc.png);
  // background-size: cover;
  // background-repeat: no-repeat;
  // overflow: hidden;
}

#bgc {
  width: 100%;
  height: 100%;
  position: absolute;
  // opacity: 0.7;
}

.login_logo {
  width: 200px;
  height: 110px;
  position: relative;
  top: 15px;
  left: 15px;
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: content-box;
}

a:hover,
a:focus {
  text-decoration: none;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  -webkit-text-size-adjust: none;
}

fieldset,
img {
  border: 0;
}

img {
  vertical-align: top;
  max-width: 100%;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: '';
}

abbr,
acronym {
  border: 0;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: ' ';
  clear: both;
  height: 0;
}

* html .clearfix {
  zoom: 1;
}

/* IE6 */
*:first-child+html .clearfix {
  zoom: 1;
}

/* IE7 */
.cli {
  clear: both;
  font-size: 0;
  height: 0;
  overflow: hidden;
  display: block;
}

.lclear {
  clear: left;
  font-size: 0;
  height: 0;
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

body {
  font-size: 12px;
  font-family: '微软雅黑', '宋体', 'Arial Narrow', Helvetica, sans-serif;
  color: #000;
  line-height: 1.2;
  text-align: left;
}

a {
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

html,
body {
  width: 100%;
  height: 100%;
}

canvas {
  display: block;
  vertical-align: bottom;
}

.count-particles {
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13e8e9;
  font-size: 0.8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles {
  font-size: 1.1em;
}

#stats,
.count-particles {
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.count-particles {
  border-radius: 0 0 3px 3px;
}

.sk-rotating-plane {
  display: none;
  width: 80px;
  height: 80px;
  margin: auto;
  background-color: white;
  -webkit-animation: sk-rotating-plane 1.2s infinite ease-in-out;
  animation: sk-rotating-plane 1.2s infinite ease-in-out;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -80px;
}

.sk-rotating-plane.active {
  display: block;
}

@keyframes sk-rotating-plane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }

  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

@keyframes login-small {
  0% {
    transform: scale(1);
    -moz-transform: scale(1);
    /* Firefox 4 */
    -webkit-transform: scale(1);
    /* Safari 和 Chrome */
    -o-transform: scale(1);
    /* Opera */
    -ms-transform: scale(1);
    /* IE 9 */
  }

  100% {
    transform: scale(0.2);
    -moz-transform: scale(0.1);
    /* Firefox 4 */
    -webkit-transform: scale(0.2);
    /* Safari 和 Chrome */
    -o-transform: scale(0.1);
    /* Opera */
    -ms-transform: scale(0.1);
    /* IE 9 */
  }
}

.login {
  opacity: 0.8;
  z-index: 2;
  position: absolute;
  width: 440px;
  border-radius: 10px;
  height: 380px;
  background: white;
  box-shadow: 0px 0px 5px #333333;
  top: calc(40% - 150px);
  left: calc(50% - 220px);
  transition: all 1s;
  -moz-transition: all 1s;
  /* Firefox 4 */
  -webkit-transition: all 1s;
  /* Safari 和 Chrome */
  -o-transition: all 1s;
  /* Opera */
}

.changeP {
  position: absolute;
  font-size: 8px;
  left: 90px;
  cursor: pointer;
  color: rgb(54, 54, 227);
}

.login-top {
  text-align: center;
  font-size: 32px;
  margin-top: 20px;
  box-sizing: border-box;
  color: #333333;
  margin-bottom: 50px;
}

.login-top div {
  font-family: '楷体';
}

.login-center {
  width: 100%;
  box-sizing: border-box;
  padding: 0 80px;
  margin-top: 30px;
}

.login-center-img {
  width: 20px;
  height: 20px;
  float: left;
  margin-top: 5px;
}

.login-center-img>img {
  width: 100%;
}

.login-center-input {
  float: left;
  width: 230px;
  margin-left: 15px;
  height: 30px;
  position: relative;
}

.login-center-input input {
  font-family: '楷体';
  font-size: 16px;
  z-index: 2;
  transition: all 0.5s;
  padding-left: 10px;
  color: #333333;
  width: 100%;
  height: 30px;
  border: 0;
  border-bottom: 1px solid #cccccc;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  box-sizing: border-box;
  outline: none;
  position: relative;
}

.login-center-input input:focus {
  border: 1px solid dodgerblue;
}

.login-center-input-text {
  background: white;
  padding: 0 5px;
  position: absolute;
  z-index: 0;
  opacity: 0;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  font-size: 14px;
  left: 5px;
  color: dodgerblue;
  line-height: 20px;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  /* Firefox 4 */
  -webkit-transition: all 0.5s;
  /* Safari 和 Chrome */
  -o-transition: all 0.5s;
  /* Opera */
}

.login-center-input input:focus~.login-center-input-text {
  top: 0;
  z-index: 3;
  opacity: 1;
  margin-top: -15px;
}

.login.active {
  -webkit-animation: login-small 0.8s;
  animation: login-small 0.8s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.login-button {
  font-family: '楷体';
  position: absolute;
  left: 30px;
  bottom: 10px;
  cursor: pointer;
  width: 180px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  background-color: dodgerblue;
  opacity: .7;
  border-radius: 5px;
  // margin: 0 auto;
  // margin-top: 100px;
  color: white;
}

#infor {
  font-size: 13px;
  color: black;
  width: 500px;
  text-align: center;
  position: absolute;
  left: calc(50% - 250px);
  bottom: 10px;
}

#schoolLogo {
  width: 660px;
  height: 240px;
  position: absolute;
  left: calc(50% - 330px);
}

#schoolLogoText {
  color: white;
  font-size: 100px;
  font-family: "楷体";
  width: 660px;
  height: 240px;
  position: absolute;
  left: calc(50% - 330px);
}

#showPassword {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 999;
}
</style>
